Day23 路上的朋友，UI Framework

2023 iThome 鐵人賽

DAY 23

Modern Web

切版與CSS：打造工具箱與切版施工流程！系列第 23 篇

15th鐵人賽 ui framework css

Jessie

團隊好想工作室 v7.0

2023-10-08 08:00:02

519 瀏覽

分享至

UI Framework，(User Interface Framework)，是為開發者提供了預設的 HTML、CSS 和 JavaScript 元件，以快速構建界面，然而，當我在查詢的過程，很困惑這個算是 UI Framework 嗎？以下做個名詞解釋，在做歸納發現。

User Interface(UI)使用者介面

促進使用者和機器之間互動的任何東西。在電腦世界中，它可以是鍵盤、操縱桿、螢幕或程式等任何東西。就電腦軟體而言，它可以是命令列提示符、網頁、使用者輸入表單或任何應用程式的前端。-MDN
Framework 架構/框架

是一個通用術語，通常指的是其他事物建構於其之上的基本支撐結構。-Wiki
Software framework 軟體框架

軟體框架，提供通用功能，可以透過其他使用者編寫的程式碼選擇性地進行更改，從而提供特定於應用程式的軟體。提供建構和部署應用程式的標準方法，並且是一個通用的、可重複使用的軟體環境，更大的軟體平台的一部分提供特定的功能，以促進軟體應用程式、產品和解決方案的開發。-Wiki
框架（Framework）與庫（Library）之間的區別:
- 框架提供了結構，允許開發者使用框架來構建，同時不必擔心底層細節，並且具有可擴展性和彈性，以適應各種不同的需求框架，就像是擁有一套規則的工具，遵守這些規則，就像在玩遊戲時要遵守遊戲規則一樣。
- Library 與框架不同，程式庫是可選的，開發者可以根據需要選擇性地使用它們，可以與多個框架或專案一起使用，自由決定如何使用程式庫，以及何時調用其功能，通常用於解決特定的問題或執行特定的任務，例如：chart.js 是圖表庫、Ｄ 3.js 是關於動畫的。

UI Framework

UI Framework 是相對廣泛的概念，通常包括 HTML、CSS 和 JavaScript 等元素，用於協助設計和開發界面。不僅包含樣式（CSS），還包括預製的 HTML 元件、JavaScript 函數庫、網格系統等，以快速建立界面。
例如：Bootstrap，它包括 HTML、CSS、JavaScript 元件。
以下範例，使用 Bootstrap 的按鈕元素：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <button class="btn btn-primary">Click Me</button>
</body>
</html>

CSS 框架

CSS 框架是 UI Framework 的子集，關注樣式（CSS）和樣式類名，以便快速設計外觀。通常不包括 HTML 元件或 JavaScript 函數庫，但提供了預製 CSS 類名，可以直接應用到 HTML 中。
例如：Tailwind CSS，提供了 CSS 類名，用於定義樣式，而不提供預製的 HTML 或 JavaScript 功能。
以下範例，使用 Tailwind CSS 的按鈕元素：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css">
</head>
<body>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Click Me
    </button>
</body>
</html>

JavaScript 框架

JavaScript 框架，專注於動態設計、互動性和應用程式的邏輯，而不是僅關注樣式。常見的 JavaScript 框架有 Vue.js、React 和 Angular 提供了組件化架構、數據綁定、虛擬 DOM 等功能，使開發者能夠建立具有互動性的網頁界面。
以下範例，使用Vue.js創建簡單的計數器應用程式：

<div id="app">
  <button @click="count++">Click me</button>
  <p>{{ count }}</p>
</div>

new Vue({
  el: "#app",
  data: {
    count: 0,
  },
});

手刻派和套件派

在前端開發社群中，存在著兩種不同的取向：手刻派和套件派。手刻派更傾向於自己編寫 HTML、CSS 和 JavaScript，以完全掌握，保有彈性。然而，套件派則更傾向於使用 UI Framework，以節省時間並快速開發界面，每種取向都有其優點和缺點，取決於個人偏好和項目需求。

UI Framework 的主要作用之一是提高開發效率，提供了大量的現成元件，如按鈕、表格、導航欄等，節省開發者的時間和精力，此外，UI Framework 通常具有響應式設計，使應用程式在不同設備上保持一致的外觀和功能。

然而，過度依賴 UI Framework 也可能帶來些問題，可能變得過於依賴 UI Framework，而忽略了學習基本的前端技能。這可能導致在需要自定義設計或修復 UI Framework 的限制時感到🥲
此外，某些 UI Framework 可能會導致所有應用程式看起來都很相似，難以個性化設計。

適當使用 UI Framework，視為輔助工具，而不是取代基本技能的工具，建立堅實的 HTML、CSS 和 JavaScript 基礎，以便在需要時進行自定義和調整，並使用 UI Framework 來提高開發效率，尤其在團隊和緊湊的時間表下。

記得初次碰 Bootstrap，只取了三個元件來搭配使用，並使用它的網格系統與斷點，也看過夥伴都用了 Bootstrap，並花了許多心力改寫，讓樣式與設計稿一樣，沒有好不好，只有情況不同，如果團隊採用，可能有其原因，例如：馬上就有一套遵循的機制，不用討論老半天，人員調度也比較順。

小結

因為我是 HTML5、CSS3 慢慢學上去的，在那之前沒碰過 UI Framework，然而，有些人是從 UI Framework 體驗前端的，又或者身邊後端朋友也是直接用，也曾看過有人發問，太早碰 UI Framework 是不是有害，因為太方便了就依賴了，到最後無法自己來？又或者說，套件是不是路上的朋友，取決我們如何看待，如果沒有基礎功而直接使用而變成依賴限制？還是有所基礎，搭配著使用，讓開發效率更好，還可以跟學習 UI Framework 的設計智慧呢？